<template>
  <view class="card">
    <view class="card-content">
      <view class="card-title">{{ title }}</view>
      <view class="card-author">{{ author }}</view>
      <view class="card-body">{{ body }}</view>
      <view class="card-stats">
        <view>{{ likes }} 喜欢</view>
        <view>{{ thoughts }} 想法</view>
      </view>
    </view>
    <view class="card-mark">
      <view v-if="mark === '已阅'" class="mark-read">已阅</view>
      <view v-if="mark === '喜欢'" class="mark-like">喜欢</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps(['title', 'author', 'body', 'likes', 'thoughts', 'mark']);

const startX = ref(0);
const startY = ref(0);
const touchDirection = ref('')


const emit = defineEmits(['swipe'])

const onTouchStart = (event) => {
  startX.value = event.touches[0].clientX;
  startY.value = event.touches[0].clientY;
  touchDirection.value = ''
};

const onTouchMove = (event) => {
  const currentX = event.touches[0].clientX;
  const currentY = event.touches[0].clientY;
  const diffX = currentX - startX.value;
  const diffY = currentY - startY.value;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    touchDirection.value = diffX > 0 ? 'right' : 'left';
  }
};


const onTouchEnd = () => {
  if (touchDirection.value === 'right') {
    // 处理右滑事件
    console.log('右滑事件');
    emit('swipe', 'right')

  } else if (touchDirection.value === 'left') {
    // 处理左滑事件
    console.log('左滑事件');
    emit('swipe', 'left')
  }

};



</script>

<style lang="scss" scoped>
.card {
  /* ... */
}

.card-content {
  /* ... */
}

.card-title {
  /* ... */
}

.card-author {
  /* ... */
}

.card-body {
  /* ... */
}

.card-stats {
  /* ... */
}

.card-mark {
  /* ... */
}

.mark-read {
  /* ... */
}

.mark-like {
  /* ... */
}
</style>